<template>
	<view class="meal-item" :style="{width: width + 'rpx', height: height + 'rpx'}">
		<image :style="{width: width + 'rpx', height: height + 'rpx'}" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/pic1.png" mode=""></image>
		<view :style="{width: width + 'rpx'}" class="font32 color-181D18 text-ellipsis m-t-10">
			打针服务包打针服务打针服务包打针服务…
		</view>	
		<view class="price f-b font32 m-t-10">¥8888</view>
		<view v-if="showButton" class="flex flex-align-center flex-space-between m-t-10">
			<image  style="width: 64rpx;height: 64rpx;margin-right: 34rpx;" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/home/ic_cart.png" mode=""></image>
			<view class="button-take flex flex-center font28 color-w">去下单</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		},
		width: {
			type: Number,
			default: 176
		},
		height: {
			type: Number,
			default: 176
		},
		showButton: {
			type: Boolean,
			default: false
		}
	})
</script>

<style lang="scss" scoped>
	.meal-item {
		width: 176rpx;
		display: inline-block;
		margin-right: 20rpx;
		image {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;
		}
		.line {
			margin: 10rpx 0;
		}
		.price {
			color: #F52200;
		}
	}
	.button-take {
		border-radius: 32rpx;
		height: 64rpx;
		padding: 0rpx 34rpx;
		background-color: #3FA897;
	}
</style>